<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>密码实时验证</title>

    <style>
      #pwd-area {
        /* border: 1px solid red; */
      }
      #pwd-area > div:last-child {
        background-color: rgba(0, 0, 0, 0.7);
        font-size: 0.8em;
        padding: 5px;
        margin: 5px;
        display: inline-block;
        border-radius: 4px;
        color: white;
        display: none;
      }
      #pwd {
        outline: none;
        border: 1px solid gray;
        border-radius: 2px;
      }
      #pwd:focus {
        border-color: blue;
      }
      #pwd-area img {
        display: none;
      }

      div.ok > img:first-child {
        display: inline-block !important;
      }
      div.err {
        color: red;
      }
      div.err > img:nth-child(2) {
        display: inline-block !important;
      }
    </style>
  </head>
  <body>
    <div id="pwd-area">
      <div>
        <span>密码</span>
        <!-- css没有办法选中父元素, 只能依赖JS实现 -->
        <input type="password" placeholder="请设置登录密码" id="pwd" />
        <!-- <标签名 /> :单标签闭合写法, 是HTML4的语法;  HTML5 不用写 -->
        <!-- 此处是格式化软件自动加的, 删不掉 -->
      </div>
      <!-- 错误提醒: -->
      <div>
        <div>
          <img src="./images/ok.png" alt="" />
          <img src="./images/err.png" alt="" />
          <span>长度8~14个字符</span>
        </div>
        <div>
          <img src="./images/ok.png" alt="" />
          <img src="./images/err.png" alt="" />
          <span>字母/数字以及标点符号至少包含2种</span>
        </div>
        <div>
          <img src="./images/ok.png" alt="" />
          <img src="./images/err.png" alt="" />
          <span>不允许有空格, 中文</span>
        </div>
      </div>
    </div>

    <script>
      // #pwd 获取焦点时, 让其父元素的兄弟 显示出来
      const pwd = document.querySelector('#pwd')
      // parent: 父母    兄弟姐妹: sibling   next: 下一个
      // 为什么不直接搜??  目的是讲知识点,  用 css选择器完全可代替
      const div = pwd.parentElement.nextElementSibling
      // 利用变量存储值, 之后利用变量复用(重复使用)
      console.log(div)

      pwd.onfocus = function () {
        div.style.display = 'block' //内联样式
      }

      pwd.onblur = function () {
        div.style.display = ''
      }

      // 实时监听: oninput
      pwd.oninput = function () {
        console.log(this.value)
        // 长度要求: 8-14 个字符
        const l = this.value.length

        // 如果是空的, 长度是0, 则什么都不做
        if (l == 0) {
          div.children[0].className = '' //重置样式
          return //终止函数, 后续代码不执行
        }

        if (l >= 8 && l <= 14) {
          // 之前做法: 先删除err 再添加ok
          // 现在: 直接用 ok 覆盖 之前的样式值
          div.children[0].className = 'ok'
        } else {
          div.children[0].className = 'err'
        }

        // 感兴趣同学, 可以自己扩展完成后续的
        // 通过正则的 match 方法, 查找是否存在某种元素
      }
    </script>
  </body>
</html>
